<template>
    <header :class="{indexHeader: indexClass}">
        <div class="headerBox w1200 margin">
            <div class="logo" v-if="indexClass">
                <router-link to="/"><img src="../../assets/images/logo.png"></router-link>
            </div>
            <div class="logo" v-else>
                <router-link to="/"><img src="../../assets/images/logo2.png"></router-link>
            </div>
            <div class="topRight">
                <div class="navMain">
                    <el-menu mode="horizontal" :default-active="activeIndex">
                        <el-menu-item index="1">
                            <router-link to="/">首页</router-link>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <router-link to="/list">我要投资</router-link>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <router-link to="">活动专区</router-link>
                        </el-menu-item>
                        <el-submenu index="4" :class="{ 'is-active': isActive }">
                            <template slot="title">
                                <router-link to="/information">信息披露</router-link>
                            </template>
                            <el-menu-item index="4-1">
                                <router-link to="/information">关于我们</router-link>
                            </el-menu-item>
                            <el-menu-item index="4-2">
                                <router-link to="/platformdata">运营数据</router-link>
                            </el-menu-item>
                            <el-menu-item index="4-3">
                                <router-link to="/notice">最新动态</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
                <div class="unLogin">
                    <router-link to="/login" class="login">登录</router-link>
                    <router-link to="/registered" class="registerted">注册有礼</router-link>
                </div>
                <div class="loginEd"></div>
            </div>
        </div>
    </header>
</template>

<script>
    export default {
        props: ['isIndex'],
        data(){
            return {
                activeIndex: '',
                indexClass: this.isIndex,
                isActive: false
            }
        },
        created(){
            this.fetchData();
        },
        watch:{
            '$route': 'fetchData'
        },
        methods: {
            fetchData(){
                this.activeIndex = this.$route.name[0];
                if(this.$route.name[0] == 4){
                    this.isActive = true
                }
            }
        }
    }
</script>

<style lang="scss">
    .indexHeader .el-menu--horizontal .el-menu-item a{ color: #fff;}
    .indexHeader .el-menu--horizontal .el-submenu .el-submenu__title a{color:  #fff; display: inline-block;}
    .indexHeader .el-menu--horizontal .el-submenu .el-submenu__title i{color:  #fff;}
    header{
        width: 100%;
        height: 80px;
        background: #fff;
        .logo{
            float: left;
            width: 149px;
            height: 57px;
            padding: 12px 0 11px 0;
        }
        .topRight{
            float: right;
        }
        .navMain{
            float: left;
            height: 80px;
            border: none;
        }
        .unLogin{
            float: left;
            padding-top: 23px;
            a{
                float: left;
                width: 98px;
                height: 34px;
                line-height: 34px;
                border-radius: 34px;
                text-align: center;
                color: #e95412;
                margin-left: 25px;
                border: 1px solid #e95412;
            }
            a:hover{
                border: 1px solid #e95412;
                background: #e95412;
                color: #fff;
            }
        }
        .el-menu{ border: none; background: none;}
        .el-menu--horizontal>.el-menu-item{
            height: 80px;
            line-height: 80px;
            border: none;
            padding: 0;
        }
        .el-menu--horizontal>.el-menu-item a{
            display: block;
            height: 80px;
            line-height: 80px;
            padding: 0 25px;
            font-size: 16px;
        }
        .el-menu--horizontal .el-menu-item a{ color: #333; }
        .el-menu--horizontal .el-menu-item a:hover{
            color: #fff;
        }
        .el-menu--horizontal .el-menu-item:focus,
        .el-menu--horizontal .el-menu-item:hover {
            background-color: #e95412;
        }
        .el-menu--horizontal .el-submenu .el-submenu__title{
            height: 80px;
            line-height: 80px;
            a{
                color: #333;
                font-size: 16px;
                display: inline-block;
            }
            i{
                color: #333;
            }
        }
        /*.indexHeader .el-menu--horizontal .el-submenu .el-submenu__title{
            a{
                color: #fff;
            }
            i{
                color: #fff;
            }
        }*/
        .el-menu--horizontal .el-submenu .el-submenu__title:hover{
            background: #e95412;
            a{
                color: #fff;
            }
            i{
                color: #fff;
            }
        }
        .el-menu--horizontal .el-submenu>.el-menu{
            top: 80px;
            background: #e95412;
            padding: 0;
        }
        .el-submenu .el-menu-item{
            min-width: 100%;
            padding: 0;
            text-align: center;
        }
        .el-menu--horizontal .el-submenu.is-opened{
            background: #e95412;
            a{
                color: #fff;
            }
            i{
                color: #fff;
            }
        }
        .el-menu--horizontal .el-submenu .el-menu-item{
            padding: 0;
        }
        .el-menu--horizontal .el-submenu .el-menu-item a{
            display: block;
            background: #e95412;
            padding: 0;
            height: 40px;
            line-height: 40px;
        }
        .el-menu--horizontal .el-submenu .el-menu-item a:hover{
            background: #c64309;
        }

        .el-menu-item.is-active{
            border: none;
            background: #e95412;
            a{
                color: #fff;
            }
        }
        .el-menu--horizontal>.el-menu-item.is-active,
        .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
            border: none;
        }
        .el-menu--horizontal .el-submenu.is-active{
            background: #ff6235;
            div a{
                color: #fff;
            }
            div i{
                color: #fff;
            }
        }
    }
    .indexHeader{
        background: #333333;
        min-width: 1200px;
        .unLogin{
            a{
                color: #fff;
                border: 1px solid #fff;
            }
            a:hover{
                border: 1px solid #e95412;
            }
        }
    }
</style>
